{% load i18n %}

{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}


<div class="relative" x-data="{ openLanguageLinks: false }">
    <a class="block cursor-pointer hover:text-gray-700 dark:hover:text-gray-200" x-on:click="openLanguageLinks = !openLanguageLinks">
        <span class="material-symbols-outlined">translate</span>
    </a>

    <div class="absolute bg-white border flex flex-col leading-none py-1 -right-2 rounded shadow-lg top-7 w-52 z-50 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openLanguageLinks" @click.outside="openLanguageLinks = false">
        {% for language in languages %}
            <form action="{% url 'set_language' %}" method="post" class="flex w-full">
                {% csrf_token %}

                <input name="next" type="hidden" value="{{ redirect_to }}">
                <input name="language" type="hidden" value="{{ language.code }}">

                <button type="submit" class="block flex-grow mx-1 px-3 py-2 rounded text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200 {% if language.code == LANGUAGE_CODE %}text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600{% endif %}">
                    {{ language.name_local }} ({{ language.code }})
                </button>
            </form>
        {% endfor %}
    </div>
</div>
